import React from 'react'
import { LineChart, Grid } from 'react-native-svg-charts'
import * as shape from 'd3-shape'
import { Circle, G, Line, Rect, Text } from 'react-native-svg'

class ExtrasExample extends React.PureComponent {
    render() {
        const data = [50, 10, 40, 95, -4, -24, 85, 91, 35, 53, -53, 24, 50, -20, -80]

        /**
         * Both below functions should preferably be their own React Components
         */

        const HorizontalLine = ({ y }) => (
            <Line
                key={'zero-axis'}
                x1={'0%'}
                x2={'100%'}
                y1={y(50)}
                y2={y(50)}
                stroke={'grey'}
                strokeDasharray={[4, 8]}
                strokeWidth={2}
            />
        )

        const Tooltip = ({ x, y }) => (
            <G x={x(5) - 75 / 2} key={'tooltip'} onPress={() => console.log('tooltip clicked')}>
                <G y={50}>
                    <Rect height={40} width={75} stroke={'grey'} fill={'white'} ry={10} rx={10} />
                    <Text
                        x={75 / 2}
                        dy={20}
                        alignmentBaseline={'middle'}
                        textAnchor={'middle'}
                        stroke={'rgb(134, 65, 244)'}
                    >
                        {`${data[5]}ºC`}
                    </Text>
                </G>
                <G x={75 / 2}>
                    <Line y1={50 + 40} y2={y(data[5])} stroke={'grey'} strokeWidth={2} />
                    <Circle cy={y(data[5])} r={6} stroke={'rgb(134, 65, 244)'} strokeWidth={2} fill={'white'} />
                </G>
            </G>
        )

        return (
            <LineChart
                style={{ height: 200 }}
                data={data}
                svg={{
                    stroke: 'rgb(134, 65, 244)',
                    strokeWidth: 2,
                }}
                contentInset={{ top: 20, bottom: 20 }}
                curve={shape.curveLinear}
            >
                <Grid />
                <HorizontalLine />
                <Tooltip />
            </LineChart>
        )
    }
}

export default ExtrasExample
